<template>
	<m-layout gap="0 24" scrollColor="#fff" title="我的f分公司业绩" ftcolor="#333"
		color="#333">
		<!-- 列表 -->
		<m-block class="flex-1" bgColor="unset">
			<template v-for="(item,index) in listArr">
				<m-block gap="30 30" spa="12 0 0 0 " class="dataList">
					<view class="h1 flex-between">
						<view class="left">
							<view class="flex">
								<m-icon size="32" type="icon-touxiang" color="var(--text_thenme)"></m-icon>
								<text class="fs30">{{item.phone}}</text>
							</view>
							<view class="flex text-white fs21 mb-16 pl-40" v-if="item.truename" >
								<text>姓名：</text>
								<text>{{item.truename}}</text>
							</view>
						</view>
						<view class="">
							<!-- <view class="right dls flex-center  plr-16 ptb-8">
								<m-icon v-if="item.dls" type="icon-gongyingshangdailishang" class="mr-8"
									color="#FFF"></m-icon>
								<m-icon v-else type="icon-f-vip" class="mr-8" color="#FFF"></m-icon>
								<text class="fs21">{{ item.dls?'股东':'普通用户' }}</text>
							</view> -->
							<view class="flex fs22 mb-8 jc-flex-end">
								<text v-if="item.isdls">合伙人</text>
								<text v-if="item.isdls&&item.ishhr" class="mlr-8">|</text>
								<text v-if="item.ishhr">代理商</text>
							</view>
							<view class="flex ai-flex-end">
								<m-icon size="28" type="icon-dengdaizhong" color="var(--text_thenme)" class="mr-12"></m-icon>
								<text class="fs21">{{item.ctime | mkfsTime}}</text>
							</view>
						</view>
						
					</view>
					<view class="h2 ">
						<view class="flex">
							<m-icon size="28" type="gryj" color="var(--text_thenme)"></m-icon>
							<text>个人业绩：{{item.selfamount}}</text>
						</view>
						<view class="flex mt-12">
							<m-icon size="28" type="gryj" color="var(--text_thenme)"></m-icon>
							<text>团队业绩：{{item.teamamount}}</text>
						</view>
						<view class="flex mt-12">
							<m-icon size="28" type="gryj" color="var(--text_thenme)"></m-icon>
							<text class="fs24">直推业绩：{{item.totalzt}}</text>
						</view>
						<view class="flex mt-12">
							<m-icon size="28" type="gryj" color="var(--text_thenme)"></m-icon>
							<text class="fs24">间推业绩：{{item.totaljt}}</text>
						</view>
					</view>
					<!-- <view class="h3 flex">
						<m-icon size="32" type="ctime" color="var(--text_thenme)" class="mr-12"></m-icon>
						<text>注册时间：{{item.ctime | mkfsTime}}</text>
					</view> -->
				</m-block>
			</template>
			<m-loading :list="listArr" :pageIndex="pageIndex" :pageCount="pageCount"></m-loading>
		</m-block>
	</m-layout>
</template>

<script>
	import {compyTeam} from "../../../api/Users.js"
	export default {
		name: '',
		data() {
			return {
				scrollTop: 0,
				listArr: [], // 列表
				pageSize: 20,
				pageIndex: 1,
				pageCount: 1,
				isLoading: true,
			};
		},
		watch: {
			idx(val) {
				this.init();
			}
		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
		},
		onShow() {
			this.$nextTick(() => {
				this.init();
			});
		},
		methods: {
			init() {
				this.pageCount = 1;
				this.pageIndex = 1;
				this.getData();
			},
			// 获取分页数据数据
			async getData() {
				if (this.pageIndex > this.pageCount) {
					return
				}
				this.isLoading = true;
				const { list, pageCount } = await compyTeam({
					pageSize: this.pageSize,
					pageIndex: this.pageIndex,
				});
				console.log('list===>', list)
				this.isLoading = false;
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onReachBottom() {
			this.getData();
			console.log("触底了");
		},
	};
</script>

<style lang="scss">
	page {
		background-size: 100% 260rpx;
		background-color: #F6F6F6;
	}

	.head {
		// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%) !important;
		padding: 0rpx 30rpx 10rpx;

		.ul {
			overflow-x: auto;

			.li {
				min-width: 60rpx;
				margin-right: 24rpx;

				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666;
				}
			}

			.active {
				background: linear-gradient(0deg, #6cdf84 0%, rgba(251, 251, 251, 0.6) 40%);

				text {
					display: inline-block;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}

	.dataList {
		.h1 {
			.left {
				text {
					padding-left: 10rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: var(--text_thenme);
				}
			}

			.right {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}
		}

		.h2 {
			margin: 24rpx 0;
			padding: 22rpx;
			background: #FBFBFB;
			border-radius: 10rpx;

			view {
				text {
					padding-left: 15rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333;
				}
			}
		}

		.h3 {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: var(--text_1);
		}
	}
	.dls {
		background: linear-gradient(86deg, #2acf4d, #efc51c);
		border-radius: 40rpx;
		color: #fff;
	}
</style>